<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .div1{
      /*-moz-box-flex:1.0; !* Firefox *!*/
      /*-webkit-box-flex:1.0; !* Safari and Chrome *!*/
      /*box-flex:1.0;*/
      -moz-box-flex:2.0; /* Firefox */
      -webkit-box-flex:2.0; /* Safari and Chrome */
      box-flex:2.0;
      /*display声明弹性布局，合格必须有*/
      display: flex;
      /*横向布局*/
      /*flex-direction: row;*/
      /*竖向布局*/
      /*flex-direction: column;*/
      /*设置一行占不下就换行*/
      /*flex-wrap: wrap;*/
      /*flex-flow是flex-direction加上flex-wrap*/
      flex-flow: wrap row;
      /*设置元素在主轴上的对齐方式，就是排列方式，一个挨着一个还是中间有空隙*/
      justify-content: space-around;
    /*  定义元素在交叉轴上的对齐方式，就是定义元素在另一条轴线上的对齐方式*/
      align-items: center;
    }
    .item{
      /*元素的放大比例，将会比原来放大一定倍数的空间，不代表字体会放大*/
      flex-grow: 4;
      /*允许元素有自己的对齐方式*/
      align-self: flex-end;
    }
  </style>
</head>
<body>
<div class="div1">
  <div>我是第一行213123123123123123111111111111111111111111|</div>
  <div>我是第二行213123123123123123111111111111111111111111|</div>
  <div class="item">我是第三行213123123123123123111111111111111111111111|</div>
  <img src="外国美女.jpg" height="200" width="200" alt="老外美女" style="border: red 1px solid"/>
</div>
</body>
</html>